<template>
  <div class="activeBox" v-loading="loading">
    <!-- 活动商品列表 -->
    <div class="twoBox" v-if="this.goodsList.length !== 0">
      <div class="fristPic">
        <img
          style="margin-top: 10px"
          width="1240px"
          height="400px"
          :src="thumb"
          alt="活动图片"
        />
      </div>
      <div class="center">
        <img alt="" height="54px" src="/images/left.png" width="450px" />
        <div>
          <h1>{{ this.activityName }}</h1>
        </div>
        <img alt="" height="54px" src="/images/right.png" width="450px" />
      </div>
      <div class="TimeDiv">
        <div>
          <div><i class="el-icon-date"></i> 距离开始</div>
          <div id="countdown">
            <span>{{ this.days }}</span>
            <span>天</span>
            <span>{{ this.hours }}</span>
            <span>时</span>
            <span>{{ this.minutes }}</span>
            <span>分</span>
            <span>{{ this.seconds }}</span>
            <span>秒</span>
          </div>
        </div>
        <div>
          <div>
            <div>{{ this.hours2 }}:{{ this.minutes2 }}</div>
            <div>{{ this.activeStatus }}</div>
          </div>
        </div>
      </div>
      <div class="activeGoods">
        <div
          class="goods"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="goGoodsDetail(item)"
          @mouseover="showButtonStatus(index)"
          @mouseout="hideButtonStatus(index)"
        >
          <img
            height="219px"
            width="232px"
            :src="item.thumb"
            alt="活动商品图片"
          />
          <div class="text-wrapper">
            <el-tooltip
              v-if="item.name.length > 10"
              class="item"
              effect="dark"
              :content="item.name"
              placement="top-start"
            >
              <span>{{ item.name }}</span>
            </el-tooltip>
            <span v-else>{{ item.name }}</span>
          </div>
          <div class="text-wrapper2">
            <el-tooltip
              v-if="item.levelPath.length > 10"
              class="item"
              effect="dark"
              :content="item.levelPath"
              placement="top-start"
            >
              <span>{{ item.levelPath }}</span>
            </el-tooltip>
            <span v-else>{{ item.levelPath }}</span>
          </div>
          <div>￥{{ item.activityPrice / 100 }}/{{ item.unit }}</div>
          <div class="buttonStute" v-show="showButtonStatusIndex === index">
            {{ goodsStatus }}
          </div>
        </div>
      </div>
    </div>
    <!-- 空状态 -->
    <div class="firstBox" v-else>
      <el-empty :image-size="300" description="暂无活动商品"></el-empty>
    </div>
    <!-- 平台优势 -->
    <div class="wrap">
      <div>
        <img alt="" height="54px" src="/images/37.png" width="1240px" />
      </div>
      <div class="advantage">
        <div>
          <img alt="" height="90px" src="/images/38.png" width="90px" />
          <h3>快递100为您实时查询物流</h3>
          <span
            >为您提供贴心、精准、实时的快递单号 查询，自动跟踪您的快递进度</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/39.png" width="90px" />
          <h3>安全的支付方式</h3>
          <span
            >使用全球领先的独立第三方支付平台，为
            广大用户提供安全快速的手机支付</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/40.png" width="90px" />
          <h3>顾客购物</h3>
          <span>24小时疯狂购，随时随地可购物，我 们随时为你提供服务</span>
        </div>
        <div>
          <img alt="" height="90px" src="/images/41.png" width="90px" />
          <h3>支付宝为您提供快速支付</h3>
          <span>支付宝为你提供简单、安全、快速的支付， 让您购物更省心</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { throttle } from "lodash";
import { GoActivePage } from "@/api/mallApi/managementend/marketing";
export default {
  name: "FlashActivePage",
  data() {
    return {
      goodsList: [],
      thumb: "",
      loading: true,
      activityName: "活动商品",
      days: "00",
      hours: "00",
      minutes: "00",
      seconds: "00",
      hours2: "00",
      minutes2: "00",
      activeStatus: "即将开始",
      goodsStatus: "即将开始",
      showButtonStatusIndex: null, // 当前悬停的商品索引
      goShopping: false,
      pageNo: 1,
      pageSize: 10,
      totalPage: 1,
      threshold: 800, // 距离底部多少像素时触发加载
    };
  },
  methods: {
    goGoodsDetail(query) {
      console.log(query);
      query.activityId = this.$route.query.activityId;
      if (this.goShopping) {
        this.$router.push({
          path: "/mall/flashsale",
          query,
        });
      } else {
        this.$message({
          message: "未在秒杀时间段",
          type: "warning",
        });
      }
    },
    showButtonStatus(index) {
      this.showButtonStatusIndex = index;
    },
    hideButtonStatus(index) {
      this.showButtonStatusIndex = -1;
    },
    getList() {
      if (this.pageNo > this.totalPage) return;
      this.loading = true;
      const self = this; // 保存对 Vue 实例的引用
      const params = {
        activityId: this.$route.query.activityId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      GoActivePage(params)
        .then((res) => {
          if (res.code !== "00000") return;
          this.pageNo++;
          this.thumb = res.data.thumb;
          this.goodsList = [...this.goodsList, ...res.data.result.rows];
          this.totalPage = res.data.result.totalPage;
          this.activityName = res.data.activityName;
          this.loading = false;
          const backendTimeString = res.data.startTime;

          const backendTime = new Date(backendTimeString);

          let hours = backendTime.getHours(); // 获取小时数（0-23）
          let minutes = backendTime.getMinutes(); // 获取分钟数（0-59）
          // 如果小时数小于 10，则添加前导零
          this.hours2 = hours < 10 ? "0" + hours : hours;
          // 如果分钟数小于 10，则添加前导零
          this.minutes2 = minutes < 10 ? "0" + minutes : minutes;
          // 获取接口返回的开始时间
          const startTime = new Date(res.data.startTime).getTime();
          // 获取当前时间
          const currentTime = new Date().getTime();
          // 计算剩余时间（单位：毫秒）
          const remainingTime = startTime - currentTime;

          // 将毫秒转换为天、小时、分钟和秒
          self.days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
          self.hours = Math.floor(
            (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          self.minutes = Math.floor(
            (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
          );
          self.seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

          if (new Date() > new Date(res.data.endTime)) {
            // console.log("活动已结束");
            this.activeStatus = "已结束";
            this.goodsStatus = "已结束";
            this.goShopping = false;
            // 在页面中显示 "活动已结束" 的逻辑
            this.days = "00";
            this.hours = "00";
            this.minutes = "00";
            this.seconds = "00";
            return;
          }
          // 更新倒计时，每秒更新一次
          const countdownInterval = setInterval(function () {
            const currentTime = new Date().getTime();
            const remainingTime = startTime - currentTime;
            self.days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
            self.hours = Math.floor(
              (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            self.minutes = Math.floor(
              (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
            );
            self.seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

            // 如果剩余时间小于等于0，则清除定时器
            if (remainingTime <= 0) {
              clearInterval(countdownInterval);
              // document.getElementById("countdown").innerHTML = "活动已开始！";
              self.days = "00";
              self.hours = "00";
              self.minutes = "00";
              self.seconds = "00";
              self.activeStatus = "活动中";
              self.goodsStatus = "去购买";
              self.goShopping = true;
            }
          }, 1000); // 每秒更新一次
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滚动位置
      const windowHeight = window.innerHeight; // 获取视口高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; // 获取文档总高度
      if (scrollHeight - (scrollTop + windowHeight) < this.threshold) {
        // 判断是否已滚动到底部
        this.getList(); // 触发加载更多
      }
    },
  },
  created() {},
  mounted() {
    this.getList(); // 首次加载数据
    this.scrollHandler = throttle(this.handleScroll, 1000); // 创建节流处理函数
    window.addEventListener("scroll", this.scrollHandler); // 绑定滚动事件
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollHandler); // 解绑滚动事件
    console.log("销毁");
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.scrollHandler); // 在离开当前路由前取消滚动事件的监听
    console.log("离开路由");
    next(); // 继续路由切换
  },
};
</script>

<style lang="scss" scoped>
.activeBox {
  background-image: url(/images/10.png);
  background-size: cover;
  .firstBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1240px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
  }
  .twoBox {
    width: 1240px;
    margin: 0 auto;
    .fristPic {
      width: 100%;
      height: 400px;
      margin-bottom: 20px;
    }
    .center {
      display: flex;
      margin-bottom: 10px;
      div {
        display: block;
        text-align: center;
        background-color: white;
        width: 340px;
        height: 54px;
        line-height: 10px;
        font-weight: 900;
      }
    }

    .TimeDiv {
      width: 1240px;
      height: 100px;
      margin-bottom: 10px;
      // background-color: aqua;
      > div:nth-child(1) {
        width: 100%;
        height: 40px;
        color: #fff;
        background: #b31e22;
        padding: 10px;
        text-indent: 10px;
        min-height: 22px;
        display: flex;
        justify-content: space-between;
        > div:nth-child(1) {
          width: 120px;
          height: 22px;
          // background-color: #ff6b00;
        }
        > div:nth-child(2) {
          width: 150px;
          height: 22px;
          // background-color: orange;
        }
      }
      > div:nth-child(2) {
        width: 100%;
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        > div:nth-child(1) {
          cursor: pointer;
          margin-left: 15px;
          width: 78px;
          height: 50px;
          // background-color: #ff6b00;s
          display: flex;
          flex-direction: column;
          align-items: center;
          font-weight: bold;
          color: #b31e22;
          > div:nth-child(2) {
            width: 100%;
            text-align: center;
            border-radius: 10px;
            background-color: #b31e22;
            color: white;
          }
        }
      }
    }
    .activeGoods {
      font-size: 16px;
      width: 100%;
      background-color: aqua;
      .goods {
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.36);
        border-radius: 4px;
        cursor: pointer;
        float: left;
        width: 232px;
        height: 317px;
        margin-bottom: 10px;
        margin-left: 13px;
        position: relative;
        .text-wrapper {
          position: absolute;
          left: 5px;
          top: 229px;
          width: 100%;
          span {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .text-wrapper2 {
          position: absolute;
          left: 5px;
          top: 255px;
          width: 100%;
          span {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        > div:nth-child(4) {
          position: absolute;
          left: 3px;
          top: 279px;
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
        .buttonStute {
          position: absolute;
          width: 222px;
          margin-left: 5px;
          height: 50px;
          background-color: #b31e22;
          z-index: 10;
          bottom: 10px;
          border-radius: 5px;
          color: white;
          font-weight: bolder;
          font-size: 16px;
          line-height: 50px;
          text-align: center;
        }
      }
    }
  }

  .advantage {
    // background-color: red;
    display: flex;
    margin: 0 auto;

    div {
      // background-color: #d3dce6;
      text-align: center;
      padding: 18px;

      H3 {
        font-size: 22px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
